<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>按键修饰符：通过对电脑外设的按键进行监听控制操作，完成回调触发限制</p>
        <!-- 【按键修饰符不区分大小写】【按键修饰符 连写为或者关系】
            .{keyAlias} 对js键盘事件而言，事件源对象($event)必然存在两个特殊取值 key
            .enter 别名限定回车键
            .tab 别名限定缩进键
            .esc 别名限定退出键
            .space 别名限定空格键
            .delete (捕获“删除”和“退格”键)
            .up 别名定义方向上
            .down 别名定义方向下
            .left 别名定义键盘方向左、定义鼠标左键
            .right 别名定义键盘方向右、定义鼠标右键
            .middle 定义鼠标中键(滚轮键)
        -->
        <!-- <textarea cols="30" rows="10" onkeydown="" onkeyup="" onkeypress=""></textarea> -->
        <textarea cols="30" rows="10" @keydown="printMsg($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" @keydown.a="printMsg($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" @keydown.enter="printMsg($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" @keydown.f4="printMsg($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" @keydown.up="printMsg($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" @keydown.left="printMsg($event)"></textarea>
        <br><br>
        <input type="button" value="鼠标事件" @mousedown.middle="printMsg($event)">
        <br><br>
        <textarea cols="30" rows="10" @keydown.a.b.c.d="printMsg($event)"></textarea>
        <hr>
        <p>系统修饰符：监听外设键盘的上的特殊系统功能按键的状态</p>
        <!-- 【系统修饰键配合按键修饰符连写为并且关系】
            .ctrl 描述ctrl被激活时触发事件
            .alt 描述alt被激活时触发事件
            .shift 描述shift被激活时触发事件
            .meta 描述meta被激活时触发事件
        -->
        <!-- 系统按键单独使用和键盘按键规则一致 -->
        <textarea cols="30" rows="10" @keydown.ctrl="printMsg($event)"></textarea>
        <br><br>
        <!-- 系统按键和键盘按键组合使用 -->
        <textarea cols="30" rows="10" @keydown.ctrl.a="printMsg($event)"></textarea>
        <br><br>
        <!-- 触发条件 ctrl+a  或者  ctrl+v -->
        <textarea cols="30" rows="10" @keydown.ctrl.a.v="printMsg($event)"></textarea>
        <br><br>
        <!-- 触发条件 ctrl+alt+a 或者  ctrl+alt+v -->
        <textarea cols="30" rows="10" @keydown.ctrl.alt.a.v="printMsg($event)"></textarea>
        <hr>
        <p>精确修饰符(2.5+)：.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。</p>
        <!-- 触发条件 ctrl+alt+a -->
        <textarea cols="30" rows="10" 
            @keydown.ctrl.alt.a.exact="printMsg($event)"
            @keyup.ctrl.alt.shift.a="printInfo($event)"
        ></textarea>
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {

                }
            },
            methods:{
                printMsg(e){
                    console.log("printMsg:",e)
                },
                printInfo(e){
                    console.log("printInfo:",e)
                }
            }
        }).mount("#app")
    </script>
</body>
</html>